<template>
  <view class="product-detail-container">
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <text>加载中...</text>
    </view>
    
    <!-- 商品详情卡片 -->
    <view v-else-if="productInfo && Object.keys(productInfo).length > 0" class="detail-card">
      <!-- 商品图片 -->
      <view class="product-image-section">
        <image 
          :src="getFirstImage(productInfo['6864930a4e2949f411990010']) || '/static/logo.png'" 
          mode="aspectFill"
          class="product-image"
        ></image>
      </view>
      
      <!-- 商品基本信息 -->
      <view class="info-section">
        <view class="info-item">
          <text class="info-label">商品名称</text>
          <text class="info-value">{{ productInfo['68634c1c87058ae1c65da306'] }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">辅助编码</text>
          <text class="info-value">{{ productInfo['68634c1c87058ae1c65da311'] }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">商品条码</text>
          <text class="info-value">{{ productInfo['68634c1c87058ae1c65da312'] }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">存储条件</text>
          <text class="info-value">{{ productInfo['68638833a4471151d6aa778d'] }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">分类</text>
          <text class="info-value">{{ productInfo['68da4cea813ea5782ed199fc'] }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">商品类型</text>
          <text class="info-value">{{ productInfo['686497f64e2949f4119901a4'] }}</text>
        </view>
   
        
        <view class="info-item">
          <text class="info-label">供应商</text>
          <text class="info-value">{{ productInfo['68b4fa66153a1d736d8571c1'] }}</text>
        </view>
        
        
        <view class="info-item">
          <text class="info-label">保质期</text>
          <text class="info-value">{{ productInfo['68665b3157603df8e65d27f3'] + productInfo['686657f757603df8e65d277b'] || '' }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">商品条码</text>
          <text class="info-value">{{ productInfo['686657f757603df8e65d277d'] || '' }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">箱规</text>
          <text class="info-value">{{ productInfo['68665b3157603df8e65d27ee'] || '' }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">保质期</text>
          <text class="info-value">{{ productInfo['68665b3157603df8e65d27f3'] || '' }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">规格长（CM）</text>
          <text class="info-value">{{ productInfo['68665c1657603df8e65d283b'] || '' }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">规格宽（CM）</text>
          <text class="info-value">{{ productInfo['68665c1657603df8e65d283c'] || '' }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">规格高（CM）</text>
          <text class="info-value">{{ productInfo['68665c1657603df8e65d283d'] || '' }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">规格体积</text>
          <text class="info-value">{{ productInfo['68665c1657603df8e65d283e'] || '' }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">重量(kg)</text>
          <text class="info-value">{{ productInfo['68665c1657603df8e65d283f'] || '' }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">销售单位</text>
          <text class="info-value">{{ productInfo['68673503544890af451faab4'] || '' }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">是否需要质检</text>
          <text class="info-value">{{ productInfo['686b789b3f0e1b398c1cc361'] === 1 ? '是' : '否' }}</text>
        </view>
     
        <view class="info-item">
          <text class="info-label">品牌</text>
          <text class="info-value">{{ productInfo['689d5e2dc82bfc2f84b38fa7']  || ''}}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">存储类型</text>
          <text class="info-value">{{ productInfo['687b06349655bb248e31cbcc'] || '' }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">计费方式</text>
          <text class="info-value">{{ productInfo['68804fe38c409b88b85196d9']  || ''}}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">SKUID</text>
          <text class="info-value">{{ productInfo['6875f89cef700e94a0d7d5fd'] || '' }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">商品体积</text>
          <text class="info-value">{{ productInfo['6899ba4dfe6e8aba15940b71']  || ''}}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">箱规</text>
          <text class="info-value">{{ productInfo['689edec9a92ea0c35cc9cd28'] || '' }}</text>
        </view>
   
    
      </view>
    </view>
    
    <!-- 无数据状态 -->
    <view v-else class="empty-container">
      <text>暂无商品信息</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { callWorkflowListAPI, callWorkflowAPI } from '../../../utils/workflow'

// 接收页面参数
const productRowid = ref('')

// 商品详情数据
const productInfo = ref({})

// 加载状态
const loading = ref(true)

const getProductDetail = async (rowid) => {
  try {
    const res = await callWorkflowAPI('68634c1c87058ae1c65da305', rowid)
    if (res) {
      console.log('商品详情', res);
      productInfo.value = res
    }
  } catch (error) {
    uni.$u.toast(error.message)
  } finally {
    loading.value = false
  }
}

const getFirstImage = (imageData) => {
  if (!imageData) return ''
  
  try {
    // 如果已经是字符串数组，直接返回第一个
    if (Array.isArray(imageData)) {
      return imageData[0] || ''
    }
    
    // 如果是JSON字符串，解析后取第一个图片的thumbnail_full_path
    const parsedData = JSON.parse(imageData)
    if (Array.isArray(parsedData) && parsedData.length > 0) {
      const first = parsedData[0]
      if (!first) return ''
      return first.thumbnail_full_path || first.file_path || ''
    }
  } catch (error) {
    console.error('解析图片数据失败:', error)
  }
  
  return ''
}

onLoad((options) => {
  if (options && options.rowid) {
    productRowid.value = options.rowid
    console.log('商品详情rowid', options.rowid);
    // 这里可以根据rowid获取商品详细信息
    getProductDetail(options.rowid)
  }
})
</script>

<style lang="scss" scoped>
.product-detail-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.loading-container,
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-size: 32rpx;
  color: #666666;
}

.detail-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.product-image-section {
  display: flex;
  justify-content: center;
  margin-bottom: 40rpx;
  
  .product-image {
    width: 300rpx;
    height: 300rpx;
    border-radius: 16rpx;
    object-fit: cover;
  }
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin: 40rpx 0 20rpx 0;
  padding-left: 20rpx;
  border-left: 6rpx solid #48eceb;
}

.info-section {
  background-color: #f8f8f8;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #eeeeee;
  
  &:last-child {
    border-bottom: none;
  }
  
  .info-label {
    font-size: 28rpx;
    color: #666666;
    flex-shrink: 0;
    margin-right: 20rpx;
  }
  
  .info-value {
    font-size: 28rpx;
    color: #333333;
    text-align: right;
    flex: 1;
    
    &.price {
      color: #ff4757;
      font-weight: bold;
      font-size: 32rpx;
    }
  }
}
</style>